<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix"><span>商户组</span></div>
    <div>
      <el-collapse v-model="activeNames">
        <el-collapse-item title="组件样式" name="1">
          <el-form label-width="100px">
            <el-form-item label="组件类型">
              <el-radio-group v-model="data.list_type">
                <el-radio label="product">商户商品</el-radio>
                <el-radio label="list">商户列表</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="显示类型" v-if="data.list_type == 'product'">
              <el-radio-group v-model="data.show_type">
                <el-radio label="1">普通</el-radio>
                <el-radio label="2">简约</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- <el-form-item label="商户列表">

            </el-form-item> -->
            <div class="proSelect">
              <div class="phead">
                <div class="name">商户</div>
                <!-- <div class="price">价格</div> -->
                <div class="action">操作</div>
              </div>
              <ul>
                <draggable element="ul" v-model="data.list" :animation="500">
                  <li v-for="(item, i) in data.list" :key="i">
                    <div class="dragIcon"><i class="el-icon-d-caret"></i></div>
                    <div class="pro">
                      <vimage v-if="item.logo" style="width: 40px; height: 40px" :src="item.logo" fit="fit"></vimage>
                      <div class="txt">{{ item.name }}</div>
                    </div>
                    <div class="action">
                      <!-- <el-button type="text">替换</el-button> -->
                      <el-button type="text" @click="removePro(i)">删除</el-button>
                    </div>
                  </li>
                </draggable>
                <li class="addPro" @click="addMerch"><el-button type="text">添加商户</el-button></li>
              </ul>
            </div>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="内容样式" name="2">
          <el-form label-width="100px">
            <el-form-item label="组件背景"><ColorPicker :color="data" :name="'bg_color'"></ColorPicker></el-form-item>
            <el-form-item label="商户标题"><ColorPicker :color="data" :name="'title_color'"></ColorPicker></el-form-item>
            <el-form-item label="商户LOGO">
              <el-radio-group v-model="data.logo_type">
                <el-radio :label="'square'">圆角</el-radio>
                <el-radio :label="'circle'">圆形</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="商品数量">
              <el-radio-group v-model="data.shownum">
                <el-radio :label="true">显示</el-radio>
                <el-radio :label="false">不显示</el-radio>
              </el-radio-group>

              <div class="bg-color">
                <el-form size="medium" label-width="100px">
                  <el-form-item label="文字颜色"><ColorPicker :color="data" :name="'num_color'"></ColorPicker></el-form-item>
                </el-form>
              </div>
            </el-form-item>
            <el-form-item label="进店按钮">
              <div class="bg-color">
                <el-form size="medium" label-width="100px">
                  <el-form-item label="类型">
                    <el-radio-group v-model="data.btn.type">
                      <el-radio :label="1">边框按钮</el-radio>
                      <el-radio :label="2">实底按钮</el-radio>
                      <el-radio :label="3">图标</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="图标" v-if="data.btn.type == 3">
                    <div class="icon_box">
                      <span class="hasIcon" v-show="data.btn.icon != ''">
                        <i :class="data.btn.icon"></i>
                        <i class="icon-abl-close el-icon-error" @click="removeIcon()"></i>
                        <span class="choose_bar" @click="chooseIcon"><i class="txt">替换</i></span>
                      </span>
                      <span class="noIcon" v-show="data.btn.icon == ''"><i class="el-icon-plus" style="color:#409EFF;" @click="chooseIcon"></i></span>
                    </div>
                  </el-form-item>
                  <el-form-item label="图标颜色" v-if="data.btn.type == 3"><ColorPicker :color="data.btn" :name="'icon_color'"></ColorPicker></el-form-item>
                  <el-form-item label="按钮文字">
                    <el-input size="medium" placeholder="如:进店" class="" v-model="data.btn.title">
                      <el-button size="medium" @click="data.btn.title = ''" slot="append">重置</el-button>
                    </el-input>
                  </el-form-item>
                  <el-form-item v-if="data.btn.type == 1 || data.btn.type == 3" label="文字颜色"><ColorPicker :color="data.btn" :name="'titlecolor1'"></ColorPicker></el-form-item>
                  <el-form-item v-if="data.btn.type == 2" label="文字颜色"><ColorPicker :color="data.btn" :name="'titlecolor2'"></ColorPicker></el-form-item>
                  <el-form-item label="按钮颜色" v-if="data.btn.type != 3"><ColorPicker :color="data.btn" :name="'color'"></ColorPicker></el-form-item>
                  <el-form-item label="按钮圆角" v-if="data.btn.type != 3">
                    <div class="slider_box">
                      <el-slider class="slider_item" :max="30" v-model="data.btn.rd"></el-slider>
                      <el-input-number v-model="data.btn.rd" :controls="false" :min="0" :max="30"></el-input-number>
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="商品样式" name="3">
          <el-form label-width="100px">
            <el-form-item label="商品标题"><ColorPicker :color="data" :name="'pr_color'"></ColorPicker></el-form-item>
            <el-form-item label="商品售卖价"><ColorPicker :color="data" :name="'price_color'"></ColorPicker></el-form-item>
            <el-form-item label="上间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.p_t"></el-slider>
                <el-input-number v-model="data.p_t" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="下间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.p_b"></el-slider>
                <el-input-number v-model="data.p_b" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="左右间距">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.p_lr"></el-slider>
                <el-input-number v-model="data.p_lr" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="上边角">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.r_t"></el-slider>
                <el-input-number v-model="data.r_t" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
            <el-form-item label="下边角">
              <div class="slider_box">
                <el-slider class="slider_item" :max="50" v-model="data.r_b"></el-slider>
                <el-input-number v-model="data.r_b" :controls="false" :min="0" :max="50"></el-input-number>
              </div>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>

    <el-dialog title="选择商户" :visible.sync="showSelectMerch" width="50%" append-to-body><SelectMerch :key="rk" :data="selectMer" @outData="closePro"></SelectMerch></el-dialog>
  </el-card>
</template>

<script>
import draggable from 'vuedraggable';
import SelectMerch from '@/components/SelectMerch/index';
import {getcommodityList} from '@/api/mall/dndlist';
import ColorPicker from '@/components/ColorPicker/index';

export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  components: {
    SelectMerch,
    draggable,
    ColorPicker
  },
  data() {
    return {
      activeNames: ['1', '2', '3'],
      showSelectMerch: false,
      selectMer: [],
      rk: 0
    };
  },
  methods: {
    closePro(list) {
      let ids = [];
      list.forEach(a => {
        a.goodlist = [];
        ids.push(a.id);
      });
      this.getlist(ids);
      // = list;
      this.showSelectMerch = false;
    },
    getlist(ids) {
      let data = {
        ids: JSON.stringify(ids)
      };
      getcommodityList(data).then(res => {
        this.data.list = res.msg;
      });
    },
    addMerch() {
      this.showSelectMerch = true;
      this.rk++;
    },
    removePro(i) {
      this.data.list.splice(i, 1);
    }
  }
};
</script>

<style lang="scss" scoped>
.bg-color {
  border: 1px solid #e9edef;
  box-sizing: border-box;
  padding: 20px 0;
  border-radius: 2px;
  background: #f4f6f8;
}
.icon_box {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #dcdfe6;
  position: relative;

  .icon-abl-close {
    position: absolute;
    top: -6px;
    right: -9px;
    color: rgba(0, 0, 0, 0.3);
    font-size: 16px;
  }

  &:hover {
    .choose_bar {
      display: block;
    }
  }

  .choose_bar {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    line-height: 18px;
    text-align: center;
    width: 100%;

    i.txt {
      display: inline-block;
      font-style: normal;
      -webkit-transform: scale(0.75);
      transform: scale(0.75);
      letter-spacing: 2px;
    }
  }
}
.proSelect {
  width: 100%;
  border: 1px solid #dcdfe6;
  margin-bottom: 22px;

  .phead {
    background: #f4f6f8;
    font-weight: 700;
    display: flex;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #dcdfe6;

    .name {
      flex: 1;
      padding-left: 10px;
    }

    .price {
      width: 80px;
      text-align: center;
    }

    .action {
      width: 100px;
      text-align: center;
    }
  }

  ul {
    margin: 0;

    li {
      display: flex;
      cursor: pointer;
      line-height: 40px;
      padding: 10px 0;
      font-size: 13px;
      border-bottom: 1px solid #dcdfe6;

      // &:last-child{
      //   border-bottom: none;
      // }

      &.addPro {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        border-bottom: none;
      }

      .dragIcon {
        width: 40px;
        height: 40px;
        text-align: center;
        font-size: 16px;
      }

      .pro {
        display: flex;
        flex: 1;

        .txt {
          display: flex;
          padding-left: 10px;
          flex: 1;
          line-height: 18px;
          align-items: center;

          .mark {
            color: #f56c6c;
            background: #f2f4f6;
            display: table;
            border-radius: 5px;
            padding: 0 3px;
            margin-right: 3px;
          }
        }
      }

      .price {
        width: 80px;
        text-align: center;
      }

      .action {
        width: 100px;
        text-align: center;
      }
    }
  }
}
</style>
